<template>
    <div>
      <DetailHeader></DetailHeader>
      <fix :show="show" :iconstyle='iconstyle' :headstyle='headstyle'></fix>
      <div class="nba"></div>
    </div>
</template>

<script>
import DetailHeader from './components/DetailHeader'
import fix from './components/fix'
export default {
  name: 'datail',
  components: {
    DetailHeader,
    fix
  },
  data () {
    return {
      show: true,
      iconstyle: {
        opacity: 0
      },
      headstyle: {
        opacity: 1
      }
    }
  },
  methods: {
    showhead () {
      const top = document.documentElement.scrollTop
      this.iconstyle.opacity = 1 / top*1000
      this.headstyle.opacity = top / 116
      if (top > 116) {
        this.show = false
      } else {
        this.show = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.showhead)
  },
  deactivated () {
    window.releaseEvents('scroll', this.showhead)
  }
}
</script>

<style lang="stylus" scoped>
  .nba
   height: 20rem
</style>
